<%@page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
  <%--  //引入Echarts--%>
    <script src="/static/js/echarts.min.js"></script>
   <%-- //引入jquery--%>
    <script src="/static/jquery/jquery-1.11.1-min.js"></script>
    <script>
        jQuery(function ($) {
            // 基于准备好的dom，初始化echarts实例:main是要展示图表位置div标签的id,
            var myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据:
            var option = {
                title: {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '交易阶段',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: 1048, name: '搜索引擎'},
                            {value: 735, name: '直接访问'},
                            {value: 580, name: '邮件营销'},
                            {value: 484, name: '联盟广告'},
                            {value: 300, name: '视频广告'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            /* 使用刚指定的配置项和数据显示图表:如果如此使用，则展示的就是实例中的value,和name;
            * 一般我们需要展示的内容：都是经过后台获取的；
            * 要求：根据不同的图表要求不同：但原理相同：要求在option.series[0].data
            * 如饼状图：data要求是value="",name="".所以在后端查询返回的data也应该只能包含value,name两个属性
            * 替换真实数据：option.series[0].data = 新的data
            * */
            $.ajax({
               url:"",
               success(data){//ajax请求返回的数据data
                   option.series[0].data =data;//替换真实数据
                   //使用指定的配置项和数据显示图表
                   myChart.setOption(option);
               }
            });

        })
    </script>

</head>
<body>
<div id="main" style="width: 800px;height:550px;"></div>
</body>
</html>
